<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>易格子</title>
        <link rel="stylesheet" type="text/css" href="../dist/yigezi.css" />
        <style>
            .yigezi .row {
                /* margin-right: -3px; */
            }
            .yigezi .row .col {
                height: 100px;
            }
            .yigezi .row .col-wrapper {
                border: 1px solid #ddd;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 22px;
                color: #999999;
            }
        </style>
    </head>
    <body>
        <div class="yigezi">
            <div class="row gutter-sm">
                <!-- 任意等份栅格布局库（易格子） -->
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">1-3</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">1-3</div>
                </div>
                <div class="col sm-1-1 mb-1-1 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">1-3</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">2-5</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">1-5</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">2-5</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">2-7</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">2-7</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">4-9</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">2-9</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">1-9</div>
                </div>
                <div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
                    <div class="col-wrapper">2-10</div>
                </div>
                <div class="col fix-5-11">
                    <div class="col-wrapper">5-11</div>
                </div>
                <div class="col fix-2-11">
                    <div class="col-wrapper">2-11</div>
                </div>
                <div class="col fix-3-6">
                    <div class="col-wrapper">3-6</div>
                </div>
                <div class="col fix-4-5">
                    <div class="col-wrapper">4-5</div>
                </div>
                <div class="col fix-2-7">
                    <div class="col-wrapper">2-7</div>
                </div>
                <div class="col fix-3-8">
                    <div class="col-wrapper">3-8</div>
                </div>
                <div class="col fix-11-12">
                    <div class="col-wrapper">11-12</div>
                </div>
                <div class="col fix-7-11">
                    <div class="col-wrapper">7-11</div>
                </div>
                <div class="col fix-3-7">
                    <div class="col-wrapper">3-7</div>
                </div>
                <div class="col fix-1-2">
                    <div class="col-wrapper">1-2</div>
                </div>
            </div>
        </div>
    </body>
</html>
